<template>
  <div>
    讲解生命周期
    <p ref="pp">{{ msg }}</p>
    <button @click="fn">点我获取 msg</button>
    <button @click="changeMsg">点我改 msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '你好哇世界!'
    }
  },
  methods: {
    fn() {
      console.log(this.msg)
    },
    changeMsg() {
      this.msg = 'Hello World!'
    }
  },
  // 与 data 平级, 写钩子函数
  beforeCreate() {
    console.log('beforeCreate', this.msg)
  },
  created() {
    // 只有在这个钩子后才可以访问 data 的数据和 methods 的方法
    // 此时还没有渲染 DOM, 所以无法获取 DOM 元素
    console.log('created', this.msg, this.$refs.pp)
  },
  beforeMount() {
    console.log('beforeMount', this.$refs.pp)
  },
  mounted() {
    console.log('mounted', this.$refs.pp)
  },
  // 只有在数据发生变化时才会执行
  // 数据都修改了, 只是 before 是指 DOM 更新前
  beforeUpdate() {
    console.log('beforeUpdate', this.msg, this.$refs.pp.innerHTML)
  },
  updated() {
    console.log('updated', this.msg, this.$refs.pp.innerHTML)
  },
  beforeDestroy() {
    // 一般用于清除一些全局的定时器之类的东西
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<style>

</style>